<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions">

	<h:form id="form_main_top">
		<p:contextMenu for="tree">
			<p:menuitem value="#{msg['wallet.app.button.addNew']}"
				process="@this" icon="ui-icon-plus"
				oncomplete="document.getElementById('form_action:btnAdd').click();" 
				update=":form_update" />

			<p:menuitem value="#{msg['wallet.app.button.update']}"
				process="@this" icon="ui-icon-pencil"
				oncomplete="document.getElementById('form_action:btnUpdate').click();"
				update=":form_action, :form_update" />

			<p:menuitem value="#{msg['wallet.app.button.delete']}"
				process="@this" icon="ui-icon-close"
				oncomplete="document.getElementById('form_action:btnDelete').click();"
				update="tree, :form_action" />
		</p:contextMenu>
		
	    <p:tree value="#{categoryBean.rootNode}" id="tree" var="node" animate="true"  
            selectionMode="single" selection="#{categoryBean.selectedNode}">  
  
  			<p:ajax event="select" listener="#{categoryBean.nodeSelected}" update=":form_update, :form_action" />
  
	        <p:treeNode>  
	            <h:outputText value="#{node.name}" />  
	        </p:treeNode>  
	        
	    </p:tree>  
	</h:form>
	
	<h:form id="form_update">
		<p:messages autoUpdate="true" />
		<p:panelGrid id="form_data">
			<p:row>
				<p:column>
					<h:outputLabel for="parent" value="#{msg['wallet.app.category.dialog.form.parent']}" />
				</p:column>
				<p:column>
					<p:selectOneMenu id="parent" value="#{categoryBean.selectedId}" filter="true" filterMatchMode="contains">
						<f:selectItem itemValue="0" itemLabel="#{msg['wallet.app.category.dialog.form.topCategory']}"/>
						<f:selectItems value="#{categoryBean.lstCategory}" var="cat" itemLabel="#{cat.name}" itemValue="#{cat.id}"/>						
					</p:selectOneMenu>
				</p:column>
			</p:row>
			<p:row>
				<p:column>
					<h:outputLabel for="name" value="#{msg['wallet.app.category.dialog.form.name']}" />
				</p:column>
				<p:column>
					<p:inputText id="name" value="#{categoryBean.customCategory.name}" required="true" requiredMessage="Category name is required" />
				</p:column>
			</p:row>
			<p:row>
				<p:column>
					<h:outputLabel for="status" value="#{msg['wallet.app.category.dialog.form.status']}" />
				</p:column>
				<p:column>
					<p:selectBooleanButton id="status"
						value="#{categoryBean.customCategory.status}"
						onLabel="#{msg['wallet.app.option.ACTIVE']}"
						offLabel="#{msg['wallet.app.option.DISABLED']}"
						onIcon="ui-icon-check" offIcon="ui-icon-close" />
				</p:column>
			</p:row>
		</p:panelGrid>
	</h:form>

	<h:form id="form_action">
		<h:panelGrid id="budget_action" columns="3">
			<p:commandButton actionListener="#{categoryBean.prepareItem(1)}"
				id="btnAdd"
				value="#{msg['wallet.app.button.addNew']}" 
				process="@this, :form_update"
				partialSubmit="true"
				rendered="#{categoryBean.updateMode eq 'false'}"
				/>
				
			<p:commandButton actionListener="#{categoryBean.prepareItem(1)}"
				id="btnSave"
				value="#{msg['wallet.app.button.update']}" 
				rendered="#{ (categoryBean.updateMode eq 'true') }"
				/>
			
			<p:commandButton actionListener="#{categoryBean.prepareItem(0)}"
				id="btnCancel"
				value="#{msg['wallet.app.button.cancel']}" 
				rendered="#{ (categoryBean.updateMode eq 'true') }"
				/>	
				
			<p:commandButton value="#{msg['wallet.app.button.delete']}"
				id="btnDelete" 
				process=":form_update"
				rendered="#{ (categoryBean.updateMode eq 'true') }"
				oncomplete="confirmDialogVar.show()" />
		</h:panelGrid>
	</h:form>
	
	<p:confirmDialog id="confirmDialog" widgetVar="confirmDialogVar"
		severity="alert"
		message="#{msg['wallet.app.category.dialog.confirmDeleteMessage']}"
		header="#{msg['wallet.app.category.dialog.confirmDeleteHeader']}"
		closable="false" appendToBody="true">
		<h:form>
			<p:commandButton id="confirm"
				actionListener="#{categoryBean.deleteItem()}" value="Yes"
				process="@this"
				oncomplete="confirmDialogVar.hide()" />

			<p:commandButton id="decline" value="Not Yet"
				onclick="confirmDialogVar.hide()" type="button" />
		</h:form>
	</p:confirmDialog>
	
</ui:composition>